<!DOCTYPE html>
<html lang="en">
<head>
  <title>bpmn-js modeler demo</title>

  <link rel="stylesheet" href="css/diagram-js.css" />
  <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
  <div class="content with-diagram" id="js-drop-zone">

    <div class="message intro">
      <div class="note">
        Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
      </div>
    </div>

    <div class="message error">
      <div class="note">
        <p>Ooops, we could not display the BPMN 2.0 diagram.</p>

        <div class="details">
          <span>Import Error Details</span>
          <pre></pre>
        </div>
      </div>
    </div>

    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>
  </div>

  <ul class="buttons">
    <li>
      download
    </li>
    <li>
      <a id="js-download-diagram" href title="download BPMN diagram">
        保存为BPMN文件
      </a>
    </li>
    <li>
      <a id="js-download-svg" href title="download as SVG image">
        保存为SVG图片
      </a>
    </li>
	<li>
	 <a id="js-loadXML" >加载本地BPMN文件</a>
	 <input  id="files" ref="refFile" />
	</li>
	<li>
	 <a id="js-name" >下载名称</a>
	 <input  id="files-name"  />
	</li>
  </ul>

  <script src="index.js"></script>
</html>

<style scoped>
	
	.containers {
	  width: 100%;
	  height: calc(100vh - 82px);
	}
	.canvas {
	  width: 100%;
	  height: 100%;
	}
	.buttons {
	  position: absolute;
	  left: 20px;
	  bottom: 20px;
	}
	.buttons li {
	  display: inline-block;
	  margin: 5px;
	}
	.buttons li a {
	  color: #333;
	  background: #fff;
	  cursor: pointer;
	  padding: 8px;
	  border: 1px solid #ccc;
	  text-decoration: none;
	}
	.containers {
	  background: white;
	  overflow: auto;
	  background-image: linear-gradient(
	      90deg,
	      rgba(220, 220, 220, 0.5) 6%,
	      transparent 0
	    ),
	    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
	  background-size: 12px 12px;
	  width: 100%;
	  height: calc(100vh - 82px);
	  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}
	
	#js-properties-panel {
	  position: absolute;
	  top: 10px;
	  right: 14px;
	}
	.bpmn-js-properties-panel {
	  position: absolute;
	  top: 0;
	  right: 0px;
	  width: 300px;
	}

</style>